<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="<%=basePath %>css/bootstrap.min.css"/>
	<link rel="stylesheet" href="<%=basePath %>js/ztree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="<%=basePath %>js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
		.mywell{
			margin-top:25px;
		}
	</style>
</head>
<body class="body">
<%@ include file = "../include/sametop.jsp" %>
<div class="container">
	<div class="row">
		<jsp:include page="../include/sameleft.jsp">
			<jsp:param value="contact" name="tag"/>
		</jsp:include>
		<div class="span9"  style="border-radius: 3px 3px 0 0;margin-top:10px">
			 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
				<li class="active" style="margin-top:5px"><i class="icon-th"></i>发送邮件</a></li>
			</ul>
			<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
				<div style="margin-top:50px;margin-bottom:0px" id="sendemail">					
					<form class="form-horizontal" action="<%=basePath%>email/emailtoperson.action" method="post">
						<fieldset>
							<div class="control-group" >
								<label class="control-label" for="input01">收件人</label>
								<div class="controls">
									<input type="text" class="span4" id="mytakers" value="${contacts}"><span style="margin-left:8px"><a href="#home" id="addbtn" class="btn "><i class="icon-plus  icon-white"></i>添加收件人</a></span>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="input01">主题</label>
								<div class="controls">
									<input type="text" class="span4" id="input01">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="input01">内容</label>
								<div class="controls">
									<textarea  rows="5" class="span4" id="input01"></textarea >
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="input01">发件人</label>
								<div class="controls">
									<input type="text" class="span4" id="input01" value="${user.useremail}">
								</div>
							</div>
							<div class="form-actions">
								<button type="submit" id="sendbtn" class="btn btn-primary">发送</button>
								<button class="btn" style="margin-left:120px" onclick="location.back()">返回</button>
						  </div>							
						</fieldset>
					</form>
				</div> 
			</div>					
		</div>
		<!-- 导出联系人弹出框 -->
		<div class = "modal hide " id="mymodal1" style="position:absolute;z-index:1;height:600px;background-color:Snow">
			
			
				<div class="span7"  style="border-radius: 3px 3px 0 0;margin-top:0px;margin-left:8px">
					 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
						<li class="active" style="margin-top:5px"><i class="icon-th"></i>添加收件人</a></li>
					</ul>
					<div class="wall" style="border-top:none; border:1px solid #dddddd ;height:470px">
						<div class="row"style="margin-top:20px" >
							<div class="span3" >
								<div style="margin-left:25px">
									<form id="searchForm" class="navbar-search pull-left" action="" >
										<input type="text" id="search" class="search-query" style="width:170px" name="q" autocomplete="off" placeholder="搜索联系人">					    	
									</form>	
								</div>
								<div class="clear"></div>
								<div style="margin-top:30px;margin-left:25px"  >
									<div id="menuContent" class="menuContent" style="position: absolute;">
											<ul id="treeDemo" class="ztree" style="margin-top:0; width:178px; height: 400px;"></ul>
									</div>
								</div>
							</div>
							<div class="span3" style="border-left:2px solid #ccc;height:440px;padding-left:15px">
								<h3>已选收件人</h3>
								<div id="mydiv" style="width:260px;height:410px; border:1px solid #dddddd;border-radius: 5px 5px 0 0;background-color:LightGrey"></div>									
							</div>
						</div>
					</div>					
				</div>	
				<div style="margin-top:40px;margin-left:440px">
					<form action="<%=basePath%>email/sendemail.action" method="post" id="myform2">
						<input id="citySel" type="hidden" name="contacts" style="width:120px;" onclick="showMenu();" />			
						<button type="submit" id="delbtn" class="btn btn-primary">确定</button>
						<span style="margin-left:10px"><a href="#" class = "btn" id="close1" data-dismiss = "modal" >取消</a></span>
					</form>
				</div>
			
		</div>
		<!-- 发送成功 -->
		<div class = "modal hide" id="mymodal2" style="width:400px;position:absolute;z-index:1">
			<div class = "modal-header">
						<input type="button" value="x" style = 'color:black' class = "close" id = "close2" data-dismiss = "modal"/>
						<h3>发送邮件</h3>
			</div>
			<div class = "modal-body" style = "height:180px;margin-top:30px">
					<div>发送成功！</div>
			</div>
			<div class = "modal-footer">
				<form action="<%=basePath%>email/onemore.action" method="post" id="myform2">
					<button type="submit" class="btn btn-primary">再发一封</button>
					<a href="" class = "btn" data-dismiss = "modal" >取消</a>
				</form>
			</div>
		</div>
	</div>
</div>	
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
<script type="text/javascript" src="<%=basePath %>js/ztree/js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript" src="<%=basePath %>js/ztree/js/jquery.ztree.excheck-3.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".trash").live("click", function(){
		//alert("hehe");
		$(this).parent().hide();
	});
	$("#addbtn").click(function(){
		$("#mymodal1").show();
	});
	$("#close1").click(function(){
		$("#mymodal1").hide();
	});
	$("#close2").click(function(){
		$("#mymodal2").hide();
	});
	$("#delbtn").click(function(){
		var ff=$("#citySel").val();
		//alert(ff);
		$("#mytakers").attr("value",ff);
		//alert("hehe");
	});
	$("#sendbtn").click(function(){
		$("#mymodal2").show("slow");
	});
	/* var contacts = document.getElementsByName("contacts");
	for(var i=0;i<contacts.length;i++){
		//alert("haha0");
		var dd=contacts[i].value;
	} */

});
	var setting = {
			isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
		    treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
		    treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
		    showLine : true,               //是否显示节点间的连线  
		    checkable : true ,
			 check: {
				enable: true,
				chkboxType: {"Y":"", "N":""},
			},
			view: {
				dblClickExpand: false,
			},
			data: {  
                simpleData: {  
                    enable: true  
                }  
            }, 
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck,
			},
			
		};
		var zNodes;  
  
		$(function(){  
		    $.ajax({  
		        async : false,  
		        cache:false,  
		        type: 'POST',  
		        dataType : "json",  
		        url: "<%=basePath%>email/emailjson.action",//请求的action路径  
		        error: function () {//请求失败处理函数  
		            alert('请求失败');  
		        },  
		        success:function(data){ //请求成功后处理函数。    
		            //alert(data);  
		            zNodes = data;   //把后台封装好的简单Json格式赋给zNodes 
		        }  
		 });
		 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});

		

		function beforeClick(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
		}
		
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			a = "";
			for (var i=0, l=nodes.length; i<l; i++) {
				a += nodes[i].name + ",";
				v=nodes[i].name;
				//alert(v);
				
			}
			//if (v.length > 0 ) v = v.substring(0, v.length-1);
			$("#mydiv").append($("<span><input type='text' style='width:180px;margin-left:15px' value="+v+"><a href='javaScript:;' style='margin-left:5px'  class='trash'><i class='icon-trash'></i></a></span>"));
			if (v.length > 0 ) a = a.substring(0, a.length-1);
				var cityObj = $("#citySel");
				cityObj.attr("value", a);
				
		};
		function showMenu() {
			//var cityObj = $("#citySel");
			//var cityOffset = $("#citySel").offset();
			//$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("#menuContent").show();
			$("body").bind("mousedown", onBodyDown);
		}
</script>
</body>
</html>